<!DOCTYPE HTML>

<html lang="en" lang="en">

<head>

    <title>html5-VideoEditor</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport"
          content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link href='http://fonts.googleapis.com/css?family=Gudea:400,700' rel='stylesheet' type='text/css'>

    <link href="css/common.css" rel="stylesheet" type="text/css" media="all"/>


    <script data-main="js/main" src="js/require.js"></script>


</head>

<body>

<div id="wrapper">
    <header>
        <button class="open" id="projectBrowser" title="Project-Browser"></button>
        <div id="projectInfo"></div>
        <div id="projectControl">
            <button id="settings" class="settings" title="Settings"></button>
            <button id="shareProject" class="share" title="Export"></button>
            <button id="toggleFullscreen" class="fullscreen" title="Toggle fullscreen" disabled></button>
        </div>
    </header>


    <div id="mainContainer">
        <div id="navigator">

            <nav id="navigatorControl">
                <ul>
                    <li data-nav="library" class="active">Assets</li>
                    <li data-nav="compositions">Compositions</li>
                    <li data-nav="effects">Effects</li>
                </ul>

            </nav>

            <div class="list" id="library"></div>
            <div class="list" id="compositions"></div>
            <div class="list" id="effects">Effects</div>

            <div id="navigatorCommands">
                <div>
                    <input id="fileBrowser" class="add" type="file" multiple/>
                    <button id="addButton" class="add"></button>
                    <button id="removeButton" class="remove" disabled></button>
                    <button id="playButton" class="play" disabled></button>
                </div>
            </div>
        </div>


        <div id="stageContainer">
            <nav id="stageControl">
                <button id="toggleNavigator" class="left"></button>
                <div>
                    <select id="stageZoom">
                        <option value="0.25">25%</option>
                        <option value="0.5">50%</option>
                        <option value="0.75">75%</option>
                        <option value="1" selected>100%</option>
                        <option value="1.5">150%</option>
                        <option value="1.75">175%</option>
                        <option value="2">200%</option>
                    </select>
                    <label for="stageZoom">Zoom</label>
                </div>
            </nav>
            <div id="stage"></div>
            <div id="stageCommands">
                <div>
                    <button id="togglePlayPauseComposition" class="play"></button>
                    <button id="cutButton" class="cut"></button>
                </div>
            </div>

        </div>
    </div>


    <div id="timeline">
        <div id="layerInfoContainer"></div>
        <div id="layerContainer">
            <div id="slider">
                <div id="timescale"></div>
                <div id="picker">
                    <div class="icon"></div>
                </div>
            </div>

        </div>

    </div>

</div>

<noscript>
    <div>
        <h1>Seriously?!</h1>

        <p>You are really trying to use a JavaScript-application with disabled JavaScript?
            <br/>Think about it ... meanwhile have a look at <a href="http://www.activatejavascript.org/">http://www.activatejavascript.org</a>
        </p>
    </div>
</noscript>


</body>


</html>